<template>
  <div>
    <div id="phaser"></div>
    <el-dialog title="设置网格" :visible.sync="dialogVisible">
      <el-radio-group v-model="picked">
        <el-radio :label="0">入口</el-radio>
        <el-radio :label="1">墙</el-radio>
        <el-radio :label="2">路</el-radio>
        <el-radio :label="3">出口</el-radio>
      </el-radio-group>
      <div class="selectConfirm">
        <el-button @click="changeGrid()">确定</el-button>
      </div>
    </el-dialog>
    <el-button @click="saveMap()">保存</el-button>
  </div>
</template>
<script>
import "pixi";
import "p2";
import Phaser from "phaser";
export default {
  name: "mapEditor",
  data() {
    return {
      game: null,
      selectedGrid: null,
      dialogVisible: false,
      picked: null,
      imgUrls: {
        pool: require("../assets/images/background.png"),
        exit: require("../assets/images/exit.png"),
        obstacle: require("../assets/images/obstacle.png"),
        road: require("../assets/images/road.png"),
        start: require("../assets/images/start.png")
      },
      gridArr: [],
      initMap: null,
      savedMap: []
    };
  },
  methods: {
    changeGrid() {
      let type = "";
      let selectedIndex = this.gridArr.indexOf(this.selectedGrid);
      switch (this.picked) {
        case 0:
          type = "start";
          this.gridArr.map(grid => {
            let index = this.gridArr.indexOf(grid);
            if (grid.data.type === "start" && index !== selectedIndex) {       
              let newGrid = this.game.add.sprite(
                grid.position.x,
                grid.position.y,
                "obstacle"
              );
              newGrid.inputEnabled = true;
              newGrid.events.onInputDown.add(this.clickGrid, this);
              newGrid.data.type = type;
              this.gridArr.splice(index, 1, newGrid);
              grid.kill();
            }
          });
          break;
        case 1:
          type = "obstacle";
          break;
        case 2:
          type = "road";
          break;
        case 3:
          type = "exit";
          this.gridArr.map(grid => {
            let index = this.gridArr.indexOf(grid);
            if (grid.data.type === "exit" && index !== selectedIndex) {
              let index = this.gridArr.indexOf(grid);
              let newGrid = this.game.add.sprite(
                grid.position.x,
                grid.position.y,
                "obstacle"
              );
              newGrid.inputEnabled = true;
              newGrid.events.onInputDown.add(this.clickGrid, this);
              newGrid.data.type = type;
              this.gridArr.splice(index, 1, newGrid);
              grid.kill();
            }
          });
          break;
        default:
          type = "obstacle";
          break;
      }
      let newGrid = this.game.add.sprite(
        this.selectedGrid.position.x,
        this.selectedGrid.position.y,
        type
      );
      newGrid.inputEnabled = true;
      newGrid.events.onInputDown.add(this.clickGrid, this);
      newGrid.data.type = type;
      this.gridArr.splice(selectedIndex, 1, newGrid);
      this.selectedGrid.kill();
      this.dialogVisible = false;
    },
    clickGrid(grid) {
      this.dialogVisible = true;
      this.selectedGrid = grid;
    },
    saveMap() {
      let hasStart = false;
      let hasExit = false;
      this.gridArr.map(grid => {
        if (grid.data.type === "start") {
          hasStart = true;
        } else if (grid.data.type === "exit") {
          hasExit = true;
        }
        this.savedMap.push({
          x: grid.position.x,
          y: grid.position.y,
          type: grid.data.type
        });
      });
      if (hasStart && hasExit) {
        console.log(JSON.stringify(this.savedMap));
      }else {
        console.log("缺少入口或出口");
      }
    }
  },
  created() {},
  mounted() {
    this.$http
      .get("../../static/init_map.json")
      .then(res => {
        this.initMap = JSON.parse(JSON.stringify(res.data));
      })
      .then(() => {
        let self = this;
        this.game = new Phaser.Game(600, 600, Phaser.AUTO, "phaser", {
          preload: preload,
          create: create
        });

        function preload() {
          self.game.load.image("pool", self.imgUrls.pool);
          self.game.load.image("obstacle", self.imgUrls.obstacle);
          self.game.load.image("exit", self.imgUrls.exit);
          self.game.load.image("road", self.imgUrls.road);
          self.game.load.image("start", self.imgUrls.start);
        }
        function create() {
          self.game.add.tileSprite(
            0,
            0,
            self.game.width,
            self.game.height,
            "pool"
          );
          self.initMap.map(item => {
            const grid = self.game.add.sprite(item.x, item.y, item.type);
            grid.data.type = item.type;
            grid.inputEnabled = true;
            grid.events.onInputDown.add(self.clickGrid, this);
            self.gridArr.push(grid);
          });
        }
      });
  },
  beforeDestroy() {
    if (this.game !== null) {
      this.game.destroy();
    }
  }
};
</script>
<style scoped>
#phaser {
}
</style>
